<script lang="ts" setup>
import { useVbenModal, VbenButton } from '@vben/common-ui';
import { h, ref,defineEmits } from 'vue';
import { DatePicker, Input, message, Select, FormItem } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { getCompanyList, doMarkContractNew } from '#/api/purchase';

const routerData = ref<any>({});
const purchaseOptions = ref<any>([]);
const emit = defineEmits(['fetch-data']) 

const onSubmit = async (values: any) => {
  doMarkContractNew({ ...values }).then((res) => {
    message.success('标记成功');
    emit('fetch-data');
    modalApi.close();
  });
};

const [Modal, modalApi] = useVbenModal({
  footer: false,
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      routerData.value = modalApi.getData<Record<string, any>>();
      purchaseOptions.value = routerData.value.info.map((item: any) => ({
        value: item.purchase_id,
        label: item.caigou_id,
      }));
    const defaultPurchaseIds = purchaseOptions.value.map((item: any) => item.value);
      formApi.updateSchema([
        {
          fieldName: 'purchase_id_arr',
          componentProps: {
            options: purchaseOptions.value,
          },
        },
      ]);
      formApi.setFieldValue('purchase_id_arr', defaultPurchaseIds);

      console.log(purchaseOptions.value);
      init();
    }
  },
});

// 公司列表数据
const purchaseCompanyList = ref<any[]>([]);

const init = async () => {
  const list = await getCompanyList({});
  purchaseCompanyList.value = list.map((item: any) => ({
    value: item.id,
    label: item.name,
  }));
};

// 状态选项列表
const statusList = ref<any>([
  { value: 0, label: '未发送' },
  { value: 1, label: '已发送' },
]);

// 更新类型选项列表
const updateTypeList = ref<any>([
  { value: 0, label: '同时更改发出和签回时间' },
  { value: 1, label: '只更改发出时间' },
  { value: 2, label: '只更改签回时间' },
]);

const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleSubmit: onSubmit,
  layout: 'horizontal',
  schema: [
    {
      component: 'Select',
      fieldName: 'purchase_id_arr',
      label: '选择采购单',
      rules: 'required',
      componentProps: {
        placeholder: '请选择要标记的采购单',
        mode: 'multiple',
        options: [], // 这里需要动态填充采购单列表
      },
    },
    {
      component: 'Select',
      fieldName: 'update_type',
      defaultValue: 0,
      label: '修改类型',
      rules: 'required',
      componentProps: {
        placeholder: '请选择更改类型',
        options: updateTypeList.value,
      },
    },
    {
      component: 'Select',
      fieldName: 'is_send_contract',
      label: '合同是否发出',
      rules: 'required',
      defaultValue: 1,

      componentProps: {
        placeholder: '请选择标记状态',
        options: statusList.value,
      },
    },
    {
      component: 'DatePicker',
      fieldName: 'contract_send_time',
      label: '合同发出日期',
      componentProps: {
        placeholder: '选择合同发出日期',
        class: 'w-full',
      },
    },
    {
      component: 'DatePicker',
      fieldName: 'contract_receive_time',
      label: '合同签回日期',
      componentProps: {
        placeholder: '选择合同签回日期',
        class: 'w-full',
      },
    },
    {
      component: 'Input',
      fieldName: 'contract_remarks',
      label: '备注信息',
      componentProps: {
        placeholder: '请输入备注信息',
        type: 'textarea',
      },
    },
  ],
  wrapperClass: 'grid-cols-1',
});
</script>

<template>
  <Modal class="w-[600px]" title="标记合同">
    <Form>
      <template #field3="slotProps">
        <Input placeholder="请输入" v-bind="slotProps" />
      </template>
    </Form>
  </Modal>
</template>
